<template>
 <div>
  声明式导航!===APP
  <ul>
    <!-- exact精准匹配 -->
    <!-- <li><router-link to="/?name=郑潇&age=18" exact>发现音乐1</router-link></li> -->
    <li><router-link :to="{path:'/',query:{name:'郑潇',age:17}}" exact>发现音乐1</router-link></li>
    <!-- <li><router-link to="/two/18/222">我的音乐2</router-link></li> -->
    <li><router-link :to="{ name: 'Two',params:{age:18,num:'123'}}">我的音乐2</router-link></li>
      <!-- 混合传参 -->
    <!-- <li><router-link to="/three/333?name=郑潇&age=18">朋友3</router-link></li> -->
  
     <li><router-link :to="{name: 'Three',params:{id:333},query:{name:'郑潇',age:18}}">朋友3</router-link></li>
  </ul>
  <hr>
  <router-view></router-view>


 </div>
</template>
<script>
export default{
    name:'',
    data () {
        return {
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>
.router-link-active{background-color: pink;}
a{
  text-decoration: none;
}
    
</style>
